import React from 'react'

import {Axis, Chart, Coord, Geom, Label, Legend, Tooltip} from "bizcharts"
import DataSet from "@antv/data-set"

const StatisticalDiagram = (list) => {
  const { DataView } = DataSet
  if(list.length == undefined){
    var data = [
      {
          totalNum: 100,
          msgCategory: "暂无数据"
      },
     ]
  } else {
    data = list
  }
  const dv = new DataView();
  dv.source(data).transform({
    type: "percent",
    field: "totalNum",
    dimension: "msgCategory",
    as: "percent"
  });
  const cols = {
    percent: {
      formatter: val => {
        val = (val * 100).toFixed(2) + "%";
        return val;
      }
    }
  };
  return (
    <div>
      <Chart
        height={window.innerHeight}
        data={dv}
        scale={cols}
        padding={[80, 100, 80, 80]}
        forceFit
      >
        <Coord type="theta" radius={0.75} />
        <Axis name="percent" />
        <Legend
          position="left"
          offsetY={-window.innerHeight / 2 + 120}
        // offsetX={-100}
        />
        <Tooltip
          showTitle={false}
          itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
        />
        <Geom
          type="intervalStack"
          position="percent"
          color="msgCategory"
          tooltip={[
            "msgCategory*percent",
            (item, percent) => {
              percent = (percent * 100).toFixed(2) + "%";
              console.log(percent)
              return {
                name: item,
                value: percent
              };
            }
          ]}
          style={{
            lineWidth: 1,
            stroke: "#fff"
          }}
        >
          <Label
            content="percent"
            formatter={(val, item) => {
              return item.point.msgCategory + ": " + val;
            }}
          />
        </Geom>
      </Chart>
    </div>
  )
}

export default StatisticalDiagram
